<template>
  <main class="js-wrap">
    <el-row :gutter="5">
      <el-form :inline="true" :model="forms" label-width="80px" label-position="left" class="demo-form-inline">
        <el-col :span="8">
          <el-form-item label="教师信息:">
            <el-input v-model="forms.code" placeholder="工号/姓名" />
          </el-form-item>
          <el-form-item label="教师状态:">
            <el-select v-model="forms.status" placeholder="请选择教师状态">
              <el-option label="在职" :value="1" />
              <el-option label="离职" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别:" style="width: 80%">
            <el-select v-model="forms.sex" placeholder="请选择教师性别">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="授课科目:">
            <el-input v-model="forms.product" placeholder="请输入授课科目" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="searchTableData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24" :offset="22">
        <el-button type="primary" @click="onNewGoods" style="margin: 0 0 10px 15px">新建教师</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%">
          <el-table-column prop="code" :label="$t('teacher.code')" width="130" align="center">
            <template #default="scope">
              <div>
                <span style="margin-left: 10px">{{ scope.row.code }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('teacher.name')" align="center" />
          <el-table-column prop="sex" :label="$t('teacher.sex')" align="center">
            <template #default="scope">
              {{ scope.row.sex }}
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('teacher.status')" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.status <= 1" type="success">{{ scope.row.status }} </el-tag>
              <el-tag v-else>{{ scope.row.status }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
          <el-table-column prop="createTime" :label="$t('goods.createTime')" width="160" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <!-- 分页 -->
        <el-pagination
          v-model:currentPage="pageControls.currentPage"
          v-model:page-size="pageControls.pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :small="pageControls.small"
          :disabled="pageControls.disabled"
          :background="pageControls.background"
          layout="total,sizes , prev, pager, next,jumper"
          :total="pageControls.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      /></el-col>
    </el-row>
    <section class="isSell-dialog">
      <el-dialog v-model="isSellDialog" :width="500" title="商品管理">
        <p>请注意，下架商品后，历史订单和排课仍然有效，新的订单和排课不再支持使用“下架商品”！</p>
        <p :style="{ color: 'red' }">当前有：XX订单购买了该商品，相关排课共计XX课时，涉及xx个学员</p>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="isSellDialog = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="handleIsSell">{{ $t("confirm") }}</el-button>
          </span>
        </template>
      </el-dialog>
    </section>
  </main>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import baseService from "@/service/baseService";
import { useDict } from "@/hooks/useDict";
import { ElMessage } from "element-plus";
interface IForm {
  // 表单类型
  code: string;
  status: string | null;
  sex: string | null;
  product: string | null;
}
interface ITable {
  // 表格数据类型
  id: number;
  code: string;
  status: string | null;
  sex: string | null;
  product: string | null;
  name: string | null;
}
interface IPage {
  // 分页接口
  currentPage: number;
  pageSize: number;
  small?: boolean;
  background?: boolean;
  disabled?: boolean;
  total?: number;
}
let isSellDialog = ref(false); // 上下架弹窗
let tableData: ITable[] = reactive([
  {
    // 表格行数据
    code: "js001",
    createTime: "2022-08-27 09:38:00",
    name: "一年级",
    id: 1011,
    product: "语文",
    sex: "男",
    status: "在职"
  },
  {
    // 表格行数据
    code: "js001",
    createTime: "2022-08-27 09:38:00",
    name: "一年级",
    id: 1011,
    product: "语文",
    sex: "男",
    status: "在职"
  },
  {
    // 表格行数据
    code: "js001",
    createTime: "2022-08-27 09:38:00",
    name: "一年级",
    id: 1011,
    product: "语文",
    sex: "男",
    status: "在职"
  },
  {
    // 表格行数据
    code: "js001",
    createTime: "2022-08-27 09:38:00",
    name: "一年级",
    id: 1011,
    product: "语文",
    sex: "男",
    status: "在职"
  },
  {
    // 表格行数据
    code: "js001",
    createTime: "2022-08-27 09:38:00",
    name: "一年级",
    id: 1011,
    product: "语文",
    sex: "男",
    status: "在职"
  }
]); // 表格数据
let rowData: ITable = reactive({
  // 表格行数据
  code: "js001",
  createTime: "2022-08-27 09:38:00",
  name: "一年级",
  id: 1011,
  product: "语文",
  sex: "男",
  status: "在职"
});
const forms: IForm = reactive({
  // 表单数据
  code: "",
  status: null,
  product: null,
  sex: null
});
// 表格分页
const pageControls = reactive<IPage>({
  currentPage: 1,
  pageSize: 5,
  small: false,
  background: true,
  disabled: false,
  total: 1
});
onMounted(() => {
  nextTick(() => {
    // fetchTeacherList();
  });
});

// 教师列表请求
const fetchTeacherList = async (
  param: { pageIndex: number; pageSize: number } = {
    pageIndex: pageControls.currentPage,
    pageSize: pageControls.pageSize
  }
) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.get("/teacher/list", param);
  console.log(res, "教师列表");
  if (res.code === 200) {
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};

const handleEdit = (index: number, row: ITable) => {
  // 操作的回调
  console.log(index, row);
  isSellDialog.value = true;
  rowData = row;
};
const handleIsSell = () => {
  console.log("chuli");
};
// const handleDelete = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const onNewGoods = () => {
  // 新建商品
  console.log("submit!");
};
// 数据查询
const searchTableData = async (param = Object.assign(forms, { pageIndex: pageControls.currentPage, pageSize: pageControls.pageSize })) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/product/list", param);
  if (res.code === 200) {
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
};
// 表格分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageControls.pageSize = val;
  fetchTeacherList();
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  pageControls.currentPage = val;
  fetchTeacherList();
};
</script>
<style lang="scss">
.js-wrap {
  .el-form-item {
    width: 80%;
    .el-select {
      width: 249px;
    }
  }
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>
